<script type="text/javascript">
{literal}
$(document).ready(function() {
	$('#deptSelector').change(function() {
		filterUserList();		
	});

	$('#roleSelector').change(function() {
		filterUserList();		
	});

	$('#statusSelector').change(function() {
		filterUserList();		
	});
});
{/literal}
</script>

{if empty($userList)}
<p>{translate}Have only one admin account in the system. Create a new account name "admin" to replace the default one and add personal information{/translate}</p>
{else}
<div id='userListFilter' class='filter_container' style='margin-bottom: 5px; position: relative; height: 20px;'>
	<div style="float: left; margin-right: 20px;" id="deptSelectorDiv">
		<span class='label'>{translate}Department{/translate}</span>&nbsp;
		<select style="width: 200px;" id="deptSelector">
			<option value='0'>{translate}All{/translate}</option>
			{html_options options=$deptList}			
		</select>
	</div>
	<div style="float: left; margin-right: 20px;" id="roleSelectorDiv">
		<span class='label'>{translate}Role{/translate}</span>&nbsp;
		<select style="width: 200px;" id="roleSelector">
			<option value='0'>{translate}All{/translate}</option>
			{html_options options=$roleList}
		</select>
	</div>
	<div style="float: left;" id="statusSelectorDiv">
	<span class='label'>{translate}Status{/translate}</span>&nbsp;
		<select style="width: 200px;" id="statusSelector">
			<option value='all'>{translate}All{/translate}</option>
			<option value='1'>{translate}In Use{/translate}</option>
			<option value='0'>{translate}Lock{/translate}</option>
		</select>
	</div>
</div>

<div id="userListBody">
	{include file="user/general_list_body.html"}
</div>
{/if}